<template>
  <div class="song-wrap flex-middle" @click="handleSongClick">
    <div class="song-sort" v-if="showSort">{{ sort }}</div>
    <div class="song-content border-bottom flex-middle flex1">
      <div class="song-info flex1">
        <div class="song-title">{{ song.title }}</div>
        <div class="song-auth flex-middle line-clamp1">
          <Icon
            v-if="song.isSq"
            class="sq-icon"
            name="https://gitee.com/hellosanbao/mypic/raw/master/SQ.png"
            size="12"
          />
          {{ song.subTitle }}
        </div>
      </div>
      <div class="song-ctrl">
        <Icon
          name="https://gitee.com/hellosanbao/mypic/raw/master/play.png"
          size="22"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import modal from "@/globalComponents/Modal/index";
export default defineComponent({
  props: {
    song: {
      type: Object as PropType<CustomTypeSong.Song>,
      default: null,
    },
    showSort: Boolean,
    sort: Number,
  },
  methods: {
    handleSongClick() {
      if (!this.song.free) {
        modal.show("需付费收听");
        return;
      }
      this.$router.push({
        path: `/audioPlay`,
        query: { id: this.song.id },
      });
    },
  },
});
</script>
<style lang="scss" scoped>
.song-wrap {
  padding: 0 20px;
  .song-content {
    padding: 12px 0;
  }
  .song-sort {
    font-size: 34px;
    color: #999;
    width: 80px;
    text-align: center;
    margin-left: -20px;
  }
  .song-title {
    font-size: 34px;
  }
  .song-auth {
    font-size: 24px;
    color: $gary-color;
    .sq-icon {
      margin-right: 10px;
    }
  }
}
</style>
